<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        组件化: 一个页面可以拆分为一个个组件,每个组件都有自己独立的结构/样式/行为.
            (1)好处: 便于维护,利于复用 -> 提升开发效率
            (2)组件分类: 普通组件/根组件.

        根组件: 整个应用最上层的组件,包裹所有普通小组件

        一个根组件 App.vue 文件(单文件组件)包含的三部分:
            template: 结构(有且只能一个根元素)
            script: js逻辑
            style: 样式(可支持less,需要包装)
                让组件支持 less
                (1) style标签, lang="less" 开启less功能
                (2) 装包: yarn add less less-loader
                    yarn add less less-loader

        
        普通组件的注册使用
        组件注册的两种方式(一般使用局部注册,如果发现确实是通用组件,在进行全局注册):
            1. 局部祖册: 只能在注册的组件内使用
                (1) 常见.vue文件(三个组成部分)
                (2)在使用的组件内导入并注册

                文件组成:
                    1. components文件夹下有三个文件:
                        HmFooter.vue
                        HmHeader.vue
                        HmManin.vue
                    2. 如何使用:导入需要注册的组件
                    import 组件对象 from '.vue文件路径'
                    import HmHeader from './components/HmHeader.vue'

                    export default {
                        // 局部注册
                        components: {
                            //'组件名': 组件对象
                            HmHeader: HmHeader,
                            HmMain: HmMain,
                            // 简写
                            HmFooter,
                        }
                    }
            2. 全局注册: 所有组件内都能使用
                (1) 创建.vue文件(三个部分组成)
                (2) 全局注册要在 main.js 中进行注册

                示例main.js: 
                    import App from './App.vue'

                    // 编写导入的代码,往代码的顶部编写(规范)
                    // 加不加.vue都可以
                    import HmButton from './components/HmButton.vue'

                    Vue.config.productionTip = true

                    // 进行全局注册
                    // Vue.component(组件名, 组件对象)
                    Vue.component('HmButton', HmButton)
                
                使用: <HmButton></HmButton>

        使用:
            当成html标签使用 <组件名></组件名>
        注意:
            组件名规范 -> 大驼峰命名法,如:HmHeader


    
    参考 https://gitee.com/yun_guo/vue2023-project.git
     -->
</body>
</html>